<template>
    <div id="Main">
      <el-table :data="tableData" :default-sort="{ prop: 'date', order: 'descending' }" style="width: 100%">
        <el-table-column prop="name" label="文件名" width="220">
          <template v-slot="scope">
            <div>
              <!-- 使用三元运算符判断文件类型，如果是 .mp3 显示图标，否则显示文件名 -->
              <template v-if="scope.row.type === '.mp3'">
                <!-- mp3 图标 -->
                <svg t="1726646243866" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="1653" width="25" height="25">
                  <path
                    d="M146.879977 0A52.335992 52.335992 0 0 0 95.999985 51.167992v921.647856a49.039992 49.039992 0 0 0 15.279998 35.791994A49.839992 49.839992 0 0 0 146.863977 1023.99984h746.287883a48.559992 48.559992 0 0 0 35.567995-15.359998A50.719992 50.719992 0 0 0 943.999853 972.815848V290.015955L655.679898 0H146.847977h0.016z"
                    fill="#00B578" fill-opacity=".79" p-id="1654"></path>
                  <path
                    d="M943.999853 287.999955H706.84789A52.127992 52.127992 0 0 1 655.999898 237.199963V0l287.951955 287.999955H943.999853z"
                    fill="#FFFFFF" fill-opacity=".7" p-id="1655"></path>
                  <path
                    d="M263.871959 751.999883h40.959993v-65.27999c0-18.943997-3.583999-47.359993-5.887999-66.04799h1.024l15.359998 45.567993 25.855996 69.631989h25.087996l25.599996-69.631989 15.871997-45.567993h1.28c-2.56 18.687997-6.143999 47.103993-6.143999 66.04799V751.999883h41.727994V561.279912h-49.663993l-29.183995 82.431987c-3.583999 11.007998-6.655999 23.039996-10.495999 34.559995h-1.279999c-3.583999-11.519998-6.655999-23.551996-10.495999-34.559995L313.279951 561.279912h-49.407992V751.999883z m224.511965 0h45.823993v-63.231991h22.271996c40.447994 0 75.263988-19.967997 75.263988-65.279989 0-47.103993-34.559995-62.20799-76.287988-62.207991h-67.071989V751.999883z m45.823993-99.327985v-55.039991h18.687997c22.015997 0 34.303995 6.655999 34.303994 25.855996 0 18.687997-10.751998 29.183995-33.023995 29.183995h-19.967996z m179.455971 102.911984c37.887994 0 70.399989-19.455997 70.399989-54.271992 0-23.807996-15.615998-38.911994-36.607994-45.055993v-1.279999c19.967997-8.447999 30.463995-22.271997 30.463995-40.959994 0-32.767995-25.855996-51.455992-65.279989-51.455992-22.527996 0-41.471994 9.215999-59.135991 23.807996l23.039996 27.903996c11.519998-10.239998 21.247997-16.127997 34.047995-16.127997 14.079998 0 21.759997 6.911999 21.759997 19.455997 0 13.823998-10.239998 23.551996-42.751994 23.551996v32.255995c39.935994 0 48.639992 9.215999 48.639993 24.831996 0 13.311998-11.519998 20.479997-29.183996 20.479997-14.847998 0-28.159996-7.679999-39.679994-18.431997l-20.991996 28.671995c13.823998 16.127997 35.071995 26.623996 65.279989 26.623996z"
                    fill="#FFFFFF" p-id="1656"></path>
                </svg>
                {{ scope.row.name }}
              </template>
              <template v-if="scope.row.type === '.docx'">
                <!-- 如果不是 mp3，显示文件名 -->
                <svg t="1726646497362" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="1819" width="25" height="25">
                  <path
                    d="M146.879977 0A52.335992 52.335992 0 0 0 95.999985 51.167992v921.647856a49.039992 49.039992 0 0 0 15.279998 35.791994A49.839992 49.839992 0 0 0 146.863977 1023.99984h746.287883a48.559992 48.559992 0 0 0 35.567995-15.359998A50.719992 50.719992 0 0 0 943.999853 972.815848V290.015955L655.679898 0H146.847977h0.016z"
                    fill="#1476F1" p-id="1820"></path>
                  <path
                    d="M943.999853 287.999955H706.84789A52.127992 52.127992 0 0 1 655.999898 237.199963V0l287.951955 287.999955H943.999853z"
                    fill="#FFFFFF" fill-opacity=".7" p-id="1821"></path>
                  <path
                    d="M180.031972 751.999883h57.343991c55.551991 0 93.951985-29.951995 93.951985-96.255985s-38.399994-94.463985-96.511985-94.463986h-54.783991V751.999883z m45.823993-36.863995v-117.247981h6.143999c30.719995 0 52.479992 12.543998 52.479992 57.855991s-21.759997 59.391991-52.479992 59.39199h-6.143999z m219.391965 40.447994c51.967992 0 87.295986-37.375994 87.295987-99.839984 0-62.20799-35.327994-97.791985-87.295987-97.791985s-87.295986 35.327994-87.295986 97.791985 35.327994 99.839984 87.295986 99.839984z m0-39.423994c-25.087996 0-40.447994-23.551996-40.447993-60.41599s15.359998-58.623991 40.447993-58.623991 40.703994 21.759997 40.703994 58.623991c0 36.863994-15.615998 60.415991-40.703994 60.41599z m203.263969 39.423994c24.831996 0 46.079993-9.471999 62.20799-28.159996l-24.063996-28.671995c-8.959999 9.727998-20.991997 17.407997-36.351995 17.407997-26.879996 0-44.287993-22.015997-44.287993-59.903991 0-37.119994 20.223997-59.135991 44.799993-59.13599 13.567998 0 23.551996 6.143999 33.279995 14.847997l23.807996-29.183995c-13.055998-13.311998-33.023995-24.831996-57.855991-24.831996-48.383992 0-90.879986 36.351994-90.879985 99.839984 0 64.51199 40.959994 97.791985 89.343986 97.791985zM717.119888 751.999883h48.639992l16.383998-37.119995c4.351999-9.983998 8.703999-19.967997 13.055998-31.743995h1.024c5.119999 11.775998 9.471999 21.759997 14.079997 31.743995L827.967871 751.999883h50.943992l-52.479992-95.999985 49.151992-94.719986H827.199871l-13.823998 34.303995c-3.839999 8.959999-7.935999 18.943997-12.287998 31.231995h-1.024c-5.375999-12.287998-9.471999-22.271997-13.823998-31.231995l-15.359997-34.303995h-50.943992l49.407992 92.671986L717.119888 751.999883z"
                    fill="#FFFFFF" p-id="1822"></path>
                </svg>
                {{ scope.row.name }}
              </template>
              <template v-if="scope.row.type === '.txt'">
                <svg t="1726646601762" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="2197" width="25" height="25">
                  <path
                    d="M146.879977 0A52.335992 52.335992 0 0 0 95.999985 51.167992v921.647856a49.039992 49.039992 0 0 0 15.279998 35.791994A49.839992 49.839992 0 0 0 146.863977 1023.99984h746.287883a48.559992 48.559992 0 0 0 35.567995-15.359998A50.719992 50.719992 0 0 0 943.999853 972.815848V290.015955L655.679898 0H146.847977h0.016z"
                    fill="#3662EC" p-id="2198"></path>
                  <path
                    d="M943.999853 287.999955H706.84789A52.127992 52.127992 0 0 1 655.999898 237.199963V0l287.951955 287.999955H943.999853z"
                    fill="#FFFFFF" fill-opacity=".7" p-id="2199"></path>
                  <path
                    d="M336.831947 751.999883h45.823993v-152.575977h51.711992V561.279912h-148.991977v38.143994h51.455992V751.999883z m102.399984 0h48.639993l16.383997-37.119995c4.351999-9.983998 8.703999-19.967997 13.055998-31.743995h1.024c5.119999 11.775998 9.471999 21.759997 14.079998 31.743995L550.079914 751.999883h50.943992l-52.479992-95.999985 49.151993-94.719986h-48.383993l-13.823998 34.303995c-3.839999 8.959999-7.935999 18.943997-12.287998 31.231995h-1.024c-5.375999-12.287998-9.471999-22.271997-13.823997-31.231995l-15.359998-34.303995h-50.943992l49.407992 92.671986L439.231931 751.999883z m217.855966 0h45.823993v-152.575977h51.711992V561.279912h-148.991977v38.143994h51.455992V751.999883z"
                    fill="#FFFFFF" p-id="2200"></path>
                </svg>
                {{ scope.row.name }}
              </template>
              <template v-if="scope.row.type === '.pdf'">
                <svg t="1726646685526" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="2361" width="25" height="25">
                  <path
                    d="M146.879977 0A52.335992 52.335992 0 0 0 95.999985 51.167992v921.647856a49.039992 49.039992 0 0 0 15.279998 35.791994A49.839992 49.839992 0 0 0 146.863977 1023.99984h746.287883a48.559992 48.559992 0 0 0 35.567995-15.359998A50.719992 50.719992 0 0 0 943.999853 972.815848V290.015955L655.679898 0H146.847977h0.016z"
                    fill="#F56839" p-id="2362"></path>
                  <path
                    d="M943.999853 287.999955H706.84789A52.127992 52.127992 0 0 1 655.999898 237.199963V0l287.951955 287.999955H943.999853z"
                    fill="#FFFFFF" fill-opacity=".7" p-id="2363"></path>
                  <path
                    d="M283.455956 751.999883h45.823993v-63.231991h22.271996c40.447994 0 75.263988-19.967997 75.263988-65.279989 0-47.103993-34.559995-62.20799-76.287988-62.207991h-67.071989V751.999883z m45.823993-99.327985v-55.039991h18.687997c22.015997 0 34.303995 6.655999 34.303994 25.855996 0 18.687997-10.751998 29.183995-33.023995 29.183995H329.279949zM459.327928 751.999883h57.343991c55.551991 0 93.951985-29.951995 93.951986-96.255985s-38.399994-94.463985-96.511985-94.463986h-54.783992V751.999883z m45.823993-36.863995v-117.247981h6.143999c30.719995 0 52.479992 12.543998 52.479992 57.855991s-21.759997 59.391991-52.479992 59.39199h-6.143999z m140.799978 36.863995h45.823993v-72.703989H756.799882v-38.143994h-65.02399v-41.727994h75.775988V561.279912h-121.599981V751.999883z"
                    fill="#FFFFFF" p-id="2364"></path>
                </svg>
                {{ scope.row.name }}
              </template>
              <template v-if="scope.row.type === '.mp4'">
                <svg t="1726647033045" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="2527" width="25" height="25">
                  <path
                    d="M146.879977 0A52.335992 52.335992 0 0 0 95.999985 51.167992v921.647856a49.039992 49.039992 0 0 0 15.279998 35.791994A49.839992 49.839992 0 0 0 146.863977 1023.99984h746.287883a48.559992 48.559992 0 0 0 35.567995-15.359998A50.719992 50.719992 0 0 0 943.999853 972.815848V290.015955L655.679898 0H146.847977h0.016z"
                    fill="#1476F1" p-id="2528"></path>
                  <path
                    d="M943.999853 287.999955H706.84789A52.127992 52.127992 0 0 1 655.999898 237.199963V0l287.951955 287.999955H943.999853z"
                    fill="#FFFFFF" fill-opacity=".7" p-id="2529"></path>
                  <path
                    d="M263.871959 751.999883h40.959993v-65.27999c0-18.943997-3.583999-47.359993-5.887999-66.04799h1.024l15.359998 45.567993 25.855996 69.631989h25.087996l25.599996-69.631989 15.871997-45.567993h1.28c-2.56 18.687997-6.143999 47.103993-6.143999 66.04799V751.999883h41.727994V561.279912h-49.663993l-29.183995 82.431987c-3.583999 11.007998-6.655999 23.039996-10.495999 34.559995h-1.279999c-3.583999-11.519998-6.655999-23.551996-10.495999-34.559995L313.279951 561.279912h-49.407992V751.999883z m224.511965 0h45.823993v-63.231991h22.271996c40.447994 0 75.263988-19.967997 75.263988-65.279989 0-47.103993-34.559995-62.20799-76.287988-62.207991h-67.071989V751.999883z m45.823993-99.327985v-55.039991h18.687997c22.015997 0 34.303995 6.655999 34.303994 25.855996 0 18.687997-10.751998 29.183995-33.023995 29.183995h-19.967996zM727.999886 751.999883h42.495994v-43.263994h20.991996V673.919895h-20.991996v-107.775983h-56.319992l-66.303989 110.847982v31.743995H727.999886V751.999883z m0-78.079988h-36.607994l21.759997-37.375994c5.375999-11.007998 10.495998-21.503997 15.359997-32.255995h1.024c-0.512 12.031998-1.536 30.463995-1.536 42.495993v27.135996z"
                    fill="#FFFFFF" p-id="2530"></path>
                </svg>
                {{ scope.row.name }}
              </template>
              <template v-if="scope.row.type === '.png'">
                <svg t="1726821710922" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="1149" width="25" height="25">
                  <path
                    d="M146.879977 0A52.335992 52.335992 0 0 0 95.999985 51.167992v921.647856a49.039992 49.039992 0 0 0 15.279998 35.791994A49.839992 49.839992 0 0 0 146.863977 1023.99984h746.287883a48.559992 48.559992 0 0 0 35.567995-15.359998A50.719992 50.719992 0 0 0 943.999853 972.815848V290.015955L655.679898 0H146.847977h0.016z"
                    fill="#1AC380" p-id="1150"></path>
                  <path
                    d="M943.999853 287.999955H706.84789A52.127992 52.127992 0 0 1 655.999898 237.199963V0l287.951955 287.999955H943.999853z"
                    fill="#FFFFFF" fill-opacity=".7" p-id="1151"></path>
                  <path
                    d="M262.463959 751.999883h45.823993v-63.231991h22.271996c40.447994 0 75.263988-19.967997 75.263989-65.279989 0-47.103993-34.559995-62.20799-76.287988-62.207991h-67.07199V751.999883z m45.823993-99.327985v-55.039991h18.687997c22.015997 0 34.303995 6.655999 34.303995 25.855996 0 18.687997-10.751998 29.183995-33.023995 29.183995h-19.967997zM438.335932 751.999883h43.519993v-63.231991c0-23.039996-3.839999-49.151992-5.887999-70.399989h1.279999l18.687998 41.727994L543.039915 751.999883h46.591993V561.279912h-43.519993v63.23199c0 22.783996 3.839999 50.175992 6.143999 70.399989h-1.28l-18.687997-42.239993-47.359993-91.391986h-46.591992V751.999883z m281.343956 3.583999c26.623996 0 50.175992-10.495998 63.48799-23.295996V643.1999h-70.911989v37.375994h30.207995v30.719995c-4.095999 3.072-11.263998 4.863999-17.919997 4.863999-35.583994 0-52.479992-22.015997-52.479992-59.903991 0-37.119994 20.223997-59.135991 48.383992-59.13599 15.871998 0 25.855996 6.399999 35.327995 14.847997l24.063996-29.183995c-13.055998-13.055998-33.023995-24.831996-60.92799-24.831996-50.943992 0-93.695985 36.351994-93.695986 99.839984 0 64.51199 41.727993 97.791985 94.463986 97.791985z"
                    fill="#FFFFFF" p-id="1152"></path>
                </svg>
                {{ scope.row.name }}
              </template>
              <template v-if="scope.row.type === '.jpg'">
                <svg t="1726821780202" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="1315" width="25" height="25">
                  <path
                    d="M146.879977 0A52.335992 52.335992 0 0 0 95.999985 51.167992v921.647856a49.039992 49.039992 0 0 0 15.279998 35.791994A49.839992 49.839992 0 0 0 146.863977 1023.99984h746.287883a48.559992 48.559992 0 0 0 35.567995-15.359998A50.719992 50.719992 0 0 0 943.999853 972.815848V290.015955L655.679898 0H146.847977h0.016z"
                    fill="#5293F3" p-id="1316"></path>
                  <path
                    d="M943.999853 287.999955H706.84789A52.127992 52.127992 0 0 1 655.999898 237.199963V0l287.951955 287.999955H943.999853z"
                    fill="#FFFFFF" fill-opacity=".7" p-id="1317"></path>
                  <path
                    d="M330.047948 755.583882c42.751993 0 62.46399-30.719995 62.463991-68.095989V561.279912h-45.823993v122.623981c0 24.831996-7.935999 32.255995-22.783997 32.255995-9.215999 0-18.943997-5.887999-25.599996-18.943997l-30.975995 23.295996c13.567998 23.551996 33.023995 35.071995 62.71999 35.071995zM435.263932 751.999883h45.823993v-63.231991h22.271996c40.447994 0 75.263988-19.967997 75.263989-65.279989 0-47.103993-34.559995-62.20799-76.287988-62.207991h-67.07199V751.999883z m45.823993-99.327985v-55.039991h18.687997c22.015997 0 34.303995 6.655999 34.303995 25.855996 0 18.687997-10.751998 29.183995-33.023995 29.183995h-19.967997z m215.807966 102.911984c26.623996 0 50.175992-10.495998 63.48799-23.295996V643.1999h-70.911989v37.375994h30.207996v30.719995c-4.095999 3.072-11.263998 4.863999-17.919998 4.863999-35.583994 0-52.479992-22.015997-52.479991-59.903991 0-37.119994 20.223997-59.135991 48.383992-59.13599 15.871998 0 25.855996 6.399999 35.327994 14.847997l24.063997-29.183995c-13.055998-13.055998-33.023995-24.831996-60.927991-24.831996-50.943992 0-93.695985 36.351994-93.695985 99.839984 0 64.51199 41.727993 97.791985 94.463985 97.791985z"
                    fill="#FFFFFF" p-id="1318"></path>
                </svg>
                {{ scope.row.name }}
              </template>
            </div>
          </template>
        </el-table-column>
  
        <el-table-column prop="size" label="大小" width="180" :formatter="sizeFormatter" sortable />
        <el-table-column prop="createTime" label="上传日期" sortable :formatter="formatter" />
        <el-table-column prop="action" label="操作" width="300">
          <template v-slot="scope">
            <el-button @click="handleDelete(scope.row._id)" :key="scope.row._id" type="primary" text bg>
              回收站
            </el-button>
            <el-button @click="Downloads(scope.row)" :key="scope.row._id" type="primary" text bg>
              下载
            </el-button>
            <el-button @click="handleEdit(scope.row);" :key="scope.row._id" type="primary" text bg>
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- txt -->
    <el-dialog v-model="flag2" title="txt文档" align-center width="1000">
      <iframe :src="txt" frameborder="0" width="100%" height="100%" style="height: 500px;"></iframe>
    </el-dialog>
    <!-- word或者是pdf -->
    <el-dialog v-model="dialogVisiblePreview" append-to-body style="width: 60%; height: 90%" :title="fileName">
      <div style="height: 80vh; width: 100%">
        <vue-office-pdf style="height: 100%; width: 100%" v-show="flag3" :src="dialogImageUrl" />
        <vue-office-docx style="height: 100%; width: 100%" v-show="flag4" :src="dialogImageUrl" />
      </div>
    </el-dialog>
  </template>
  
  <script setup lang="ts">
  import { onMounted, reactive, ref, watch, nextTick } from 'vue'
  import type { TableColumnCtx } from 'element-plus'
  import { Close } from '@element-plus/icons-vue'
  import axios from 'axios'
  import VueOfficeDocx from '@vue-office/docx'
  import VueOfficePdf from '@vue-office/pdf'
  // import VueOfficePdf from 'vue-office-pdf';
  import '@vue-office/docx/lib/index.css'
  const tableData = ref<FileData[]>([])
  // txt文件路径
  let txt = ref('')
  let flag2 = ref(false)
  // word或者pdf
  let dialogVisiblePreview = ref(false)
  let dialogImageUrl = ref('')
  let flag3 = ref(false)
  let flag4 = ref(false)
  let fileName = ref('')
  onMounted(() => {
    getFileData()
  })
  
  const getFileData = async () => {
    try {
      let { data: { data } } = await axios.get('http://localhost:3000/wordfile')
      tableData.value = data.map((item: any) => ({
        ...item,
        createTime: new Date(item.createTime) // 确保 createTime 是 Date 对象
      }))
    } catch (error) {
      console.error('有错误:', error)
    }
  }
  
  interface FileData {
    name: string
    type: string // 文件类型，如 .mp3, .pdf
    size: number // 文件大小，以字节为单位
    createTime: Date
    action: string
  }
  
  const formatter = (row: FileData, column: TableColumnCtx<FileData>) => {
    return row.createTime.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
    })
  }
  
  const sizeFormatter = (row: FileData, column: TableColumnCtx<FileData>) => {
    return formatSize(row.size);
  }
  
  const formatSize = (sizeInBytes: number) => {
    const sizeInMB = sizeInBytes / (1024 * 1024);
    return sizeInMB.toFixed(2) + ' MB';
  }
  
  let handleDelete = async (id: string) => {
    await axios.post('http://localhost:3000/updatefile', { id, flag: true })
    getFileData()
  }
  let Downloads = (row: any) => {
    console.log(row.path);
    //window.open(row.path, '_blank') // 下载或在新标签页中打开文件
    fetch(row.path)
      .then(res => res.blob())
      .then(blob => {
        let url = window.URL.createObjectURL(blob)
        let a = document.createElement('a')
        a.style.display = 'none'
        a.href = url
        a.download = row.name
        document.body.appendChild(a)
        a.click()
        window.URL.revokeObjectURL(url)
        document.body.removeChild(a)
      })
  }
  let handleEdit = (row: any) => {
    if(row.type === '.txt') {
      flag2.value = true
      txt.value = row.path
    }else if (row.type === '.docx'){
      dialogVisiblePreview.value =  true
      fileName.value = row.name
      flag4.value = true
      flag3.value = false
      dialogImageUrl.value = row.path
      console.log(dialogImageUrl+'成功执行word');
    }else if( row.type === '.pdf'){
      dialogVisiblePreview.value =  true
      fileName.value = row.name
      flag3.value = true
      flag4.value = false
      dialogImageUrl.value = row.path
    }else{
      alert('暂不支持预览')
    }
  }
  </script>
  
  <style scoped>
  #Main {
    margin-top: 20px;
  }
  
  .demo-image__error .image-slot {
    font-size: 30px;
  }
  
  .demo-image__error .image-slot .el-icon {
    font-size: 30px;
  }
  
  .demo-image__error .el-image {
    width: 100%;
    height: 200px;
  }
  
  .audio {
    width: 350px;
    display: flex;
    align-items: center;
    background-color: #fff;
  }
  </style>
  